<template>
	<view class="tabbar-box">
		<block v-for="(item, index) in menu" :key="index">
			<view class="menu-item" :class="currIndex == index ? 'active' : ''" @click="tabClick(index, item.url)">
				<hz-icon class="iconfont" :name="item.icon" size="40rpx" color="#A8CBA4"></hz-icon>
				<!-- <view class="iconfont {{item.icon}}"></view> -->
				<!-- <image class="iconfont" src="/static/logo.png" mode="aspectFit"></image> -->
				<text>{{ item.name }}</text>
			</view>
		</block>
		<!-- 添加选中圆形 -->
		<view
			class="active-tabbar-box"
			:style="{
				'--n': currIndex
			}"
		></view>
	</view>
</template>

<script>
export default {
	name: 'tabbar',

	data() {
		return {
			// 定义菜单
			menu: [
				{
					// 菜单名称
					name: '首页',
					// 阿里巴巴矢量图标库引入图标
					icon: 'home',
					url: '/pages/index/index'
				},
				{
					name: '文章',
					icon: 'wenzhang',
					url: '/pages/news/news'
				},
				{
					name: '答题',
					icon: 'dati',
					url: '/pages/answer/answer'
				},
				{
					name: '我的',
					icon: 'my',
					url: '/pages/my/my'
				}
			],
			// 当前选中菜单的索引，默认为第一个菜单
			currIndex: 0
		};
	},

	methods: {
		// 菜单点击事件
		tabClick(index) {
			if (this.currIndex == index) return;

			this.currIndex = index;
			this.$emit('change', this.menu[index]);
		}
	}
};
</script>

<style lang="scss" scoped>
.tabbar-box {
	/* 背景颜色 */
	--color: #222;
	background: var(--color);
	/* 菜单选中的背景色 */
	--bg: orange;
	/* 每个菜单的宽度 */
	--w: 175rpx;
	/* 页面总宽度 */
	--t: 750rpx;
	/* 菜单选中的圆形背景宽度 */
	--c: 120rpx;
	/* 设置底部安全距离 */
	/* 注意：calc计算 符号之间需要间距，env()和 constant()要同时存在，且constant()要在前面*/
	/* 底部高度为120rpx 选中圆形高度为120rpx 底边距应该为底部高度+ 选中圆形高度的一半 即 120+60=180 */
	// padding-bottom: calc(constant(safe-area-inset-bottom) + 180rpx);
	padding-bottom: calc(env(safe-area-inset-bottom) + 180rpx);
}

.tabbar-box {
	position: fixed;
	left: 0;
	bottom: 0;
	z-index: 1;
	background: #fff;
	width: var(--t);
	height: 120rpx;
	border-radius: 10rpx 10rpx 0 0;
	display: flex;
	align-items: center;
	justify-content: center;
	/* 设置ios底部安全距离 */
	// padding-bottom: constant(safe-area-inset-bottom);
	padding-bottom: env(safe-area-inset-bottom);
}

.menu-item {
	display: flex;
	align-items: center;
	justify-content: center;
	/* 竖向垂直居中 */
	flex-direction: column;
	width: var(--w);
	height: 100%;
	position: relative;
}

.menu-item .iconfont {
	width: 40rpx;
	height: 40rpx;
	// font-size: 40rpx;
	/* 添加过渡效果 */
	transition: all 0.5s;
}

.menu-item text {
	font-size: 26rpx;
	font-weight: bold;
	color: #222;
	position: absolute;
	transform: translateY(50rpx);
	/* 添加过渡效果 */
	transition: all 0.5s;
	/* 设置默认不显示 */
	opacity: 0;
}

/* 设置菜单选中样式 */
.menu-item.active .iconfont {
	transform: translateY(-60rpx);
}

.menu-item.active text {
	opacity: 1;
	transform: translateY(22rpx);
}

/* 菜单选中圆形样式 */
.active-tabbar-box {
	width: var(--c);
	height: var(--c);
	background: var(--bg);
	position: absolute;
	border-radius: 50%;
	box-sizing: border-box;
	border: 10rpx solid var(--color);
	--left-pad: calc(var(--t) - (4 * var(--w)));
	left: calc((var(--left-pad) / 2) + (var(--w) / 2 - (var(--c) / 2)));
	top: calc(-50% + constant(safe-area-inset-bottom) / 2);
	top: calc(-50% + env(safe-area-inset-bottom) / 2);
	z-index: -1;
	/* 添加过渡效果 */
	transition: all 0.5s;
	/* 设置选中偏移 */
	transform: translateX(calc(var(--w) * var(--n)));
}

/* 菜单选中圆形样式添加前后圆滑凹凸 */
.active-tabbar-box::after,
.active-tabbar-box::before {
	content: '';
	position: absolute;
	top: 50%;
	width: 30rpx;
	height: 30rpx;
	background: transparent;
}

.active-tabbar-box::before {
	left: -33rpx;
	border-radius: 0 30rpx 0 0;
	box-shadow: 0 -15rpx 0 0 var(--color);
}

.active-tabbar-box::after {
	right: -33rpx;
	border-radius: 30rpx 0 0 0;
	box-shadow: 0 -15rpx 0 0 var(--color);
}
</style>
